<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item :label="`${$t('common.belong_merchant')}:`">
					<merchant-select
						v-model="queryData.merchantId"
						v-symbols
						:placeholder="$t('common.select_all')"
					></merchant-select>
				</el-form-item>

				<el-form-item :label="`${$t('common.updateAt')}:`">
					<el-date-picker
						v-model="operateTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						value-format="timestamp"
						style="width: 375px"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>

				<el-form-item :label="`${$t('common.action_module')}:`">
					<el-select
						style="width:150px"
						:placeholder="`${$t('common.select_all')}`"
						:value="1000"
					>
						<el-option
							:label="`${$t('routes.game.game_manage')}`"
							:value="1000"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item :label="`${$t('common.action_page')}:`">
					<el-select
						v-model="queryData.operatePageCode"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						:value="queryData.operatePageCode"
						collapse-tags
					>
						<el-option
							v-for="option in selectorOptions"
							:key="option.pageCode"
							:label="option.pageName"
							:value="option.pageCode"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-select
						v-model="actionSourceType"
						size="medium"
						style="width: 6rem"
					>
						<el-option
							:label="`${$t('common.updateBy')}`"
							:value="0"
						></el-option>
						<el-option
							:label="`${$t('common.updateByIP')}`"
							:value="1"
						></el-option>
					</el-select>
					<el-input
						v-model="actionSource"
						size="medium"
						:placeholder="$t('common.please_enter')"
						style="width: 9rem"
						clearable
					></el-input>
				</el-form-item>

				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
				highlight-current-row
				header-align="center"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="moduleCode"
					align="center"
					:label="$t('common.action_module')"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.moduleName ||
								getModuleName(scope.row.moduleCode)
						}}
					</template>
				</el-table-column>

				<el-table-column
					prop="operatePageCode"
					align="center"
					:label="$t('common.action_page')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.operatePage ||
								getPageName(scope.row.operatePageCode)
						}}
					</template>
				</el-table-column>

				<el-table-column
					prop="operateType"
					align="center"
					:label="$t('common.operation_type')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ operateTypeMap[scope.row.operateType] || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="operateFunction"
					align="center"
					:label="$t('common.action_function')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.operateFunction || '_' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="operateObject"
					align="center"
					:label="$t('common.action_ob')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.operateObject || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="operateUserName"
					align="center"
					:label="$t('common.updateBy')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.operateUserName || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="accountType"
					align="center"
					:label="$t('common.action_user_type')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ userTypeMap[scope.row.accountType] || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="merchantName"
					align="center"
					:label="$t('common.belong_merchant')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="requestIp"
					align="center"
					:label="$t('common.updateByIP')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.requestIp || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.last_updateAt')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="operateBeforeParam"
					align="center"
					:label="$t('common.action_before')"
					min-width="120px"
				>
					<template slot-scope="scope">
						<el-tooltip effect="dark" placement="top">
							<div class="specify-main-content">
								{{ scope.row.operateBeforeParam || '-' }}
							</div>

							<div slot="content">
								<template
									v-for="(item,
									index) in scope.row.operateBeforeParam.split(
										';'
									)"
								>
									<br v-if="index !== 0" :key="index" />
									{{ `${item}` }}
								</template>
							</div>
						</el-tooltip>
					</template>
				</el-table-column>

				<el-table-column
					prop="operateAfterParam"
					align="center"
					:label="$t('common.action_after')"
					min-width="120px"
				>
					<template slot-scope="scope">
						<el-tooltip effect="dark" placement="top">
							<div class="specify-main-content">
								{{ scope.row.operateAfterParam || '-' }}
							</div>

							<div slot="content">
								<template
									v-for="(item,
									index) in scope.row.operateAfterParam.split(
										';'
									)"
								>
									<br v-if="index !== 0" :key="index" />
									{{ `${item}` }}
								</template>
							</div>
						</el-tooltip>
					</template>
				</el-table-column>

				<el-table-column
					prop="remark"
					align="center"
					:label="$t('common.remark')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
const start = () =>
	dayjs()
		.startOf('day')
		.valueOf()

const end = () =>
	dayjs()
		.endOf('day')
		.valueOf()

export default {
	name: routerNames.dxnActionLog,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			accTypeMap: [
				'',
				this.$t('risk.risk_acct_normal'),
				this.$t('risk.risk_acct_bussiness'),
				this.$t('risk.risk_acct_exchange'),
				this.$t('risk.risk_acct_play')
			],
			userTypeMap: [
				'',
				'总控超管',
				'总控管理员',
				'总控职员',
				'商户超管',
				'商户管理员',
				'商户职员'
			],
			operateTypeMap: [
				'',
				'其它',
				'新增',
				'编辑',
				'删除',
				'解散',
				'编辑机器人数量'
			],
			selectorOptions: [],
			operateTime: [start(), end()],
			tableHeight: 480,
			otherDependenComponents: [],
			actionSource: '',
			actionSourceType: 0,
			loading: false,
			sectionCode: 0,
			dataList: [],
			queryData: {
				operateEndTime: '',
				requestIp: '',
				merchantId: '',
				moduleCode: '',
				operatePageCode: '',
				operateUserName: '',
				operateStartTime: ''
			}
		}
	},
	created() {
		this.loadDropdownConfig()
		this.reset()
	},
	methods: {
		getPageName(code) {
			if (!this.selectorOptions) return '-'
			return (
				this.selectorOptions.find((item) => item.value === code)
					.label || '-'
			)
		},
		loadData() {
			if (this.actionSourceType) {
				this.queryData.requestIp = this.actionSource
				this.queryData.operateUserName = ''
			} else {
				this.queryData.requestIp = ''
				this.queryData.operateUserName = this.actionSource
			}
			this.loading = true
			this.dataList = []
			this.queryData.operateStartTime = JSON.parse(this.operateTime[0])
			this.queryData.operateEndTime = JSON.parse(this.operateTime[1])
			const params = {
				...this.queryData,
				...this.getParams()
			}
			this.$api
				.getDXNActionLogData(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.dataList = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					} else {
						this.$message({
							message:
								res?.msg || this.$t('common.interface_error'),
							type: 'error'
						})
					}
				})
				.catch(() => (this.loading = false))
		},
		loadDropdownConfig() {
			this.$api.getActionLogDropdownConfig().then((res) => {
				if (res?.code === 200) {
					this.selectorOptions = res.data.filter(
						(item) => item.sectionCode === 2
					)
				} else {
					this.$message({
						message: res?.msg || this.$t('common.interface_error'),
						type: 'error'
					})
				}
			})
		},
		reset() {
			this.operateTime = [start(), end()]
			this.actionSource = ''
			this.actionSourceType = 0
			this.queryData = {
				operateEndTime: '',
				requestIp: '',
				merchantId: '',
				moduleCode: '',
				operatePageCode: '',
				operateUserName: '',
				operateStartTime: '',
				pageNum: 1
			}
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep div.specify-main-content {
	text-indent: 0;
	border: none;
	font-size: 14px;
	color: #606266;
	width: 100%;
	overflow: hidden;
	padding: 0 10px;
	text-wrap: nowrap;
	font-family: inherit;
	overflow: ellipsis;
	text-overflow: ellipsis;
}
</style>
